﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>async 测试</title>

    <script src="../Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>


    <script type="text/javascript">

        // 调用的次数.
        var vCallAjaxTimes = 0;


        $(document).ready(function () {

            // 按钮 的 点击处理事件.
            $("#btnRunLongTime").click(function () {

                // 先清空结果.
                ShowAjaxResult("", 1);
                ShowAjaxResult("", 2);


                // 是否是用 async
                var vUseAsync;

                if ($("#chkUseAsync").attr("checked") == "checked") {
                    // 选择勾上了.
                    // 使用 cache.
                    vUseAsync = true;
                } else {
                    vUseAsync = false;
                }


                // 调用 ajax 
                $.ajax({
                    url: "/WcfTestService.svc/RunLongTime",
                    type: "get",
                    cache: false,
                    data: "second=5",
                    async: vUseAsync,
                    success: function (data) {
                        ShowAjaxResult(data.d, 1);
                    },

                    error: function (msg) {
                        alert(msg.responseText);
                    }
                });



                // 调用 ajax 
                $.ajax({
                    url: "/WcfTestService.svc/RunLongTime",
                    type: "get",
                    cache: false,
                    data: "second=3",
                    async: vUseAsync,
                    success: function (data) {
                        ShowAjaxResult(data.d, 2);
                    },

                    error: function (msg) {
                        alert(msg.responseText);
                    }
                });

            });

        })



        // 显示  执行结果.
        function ShowAjaxResult(pResult, pIndex) {
            $("#lblCallAjaxResult" + pIndex).html(pResult);
        }

    </script>


</head>
<body>


<h4>
测试 jQuery 中 ， async 参数的作用于影响.
</h4>

    


  <form id="form1" action="#">
     
    <table>
      
      <tr>
        <td>
          是否启用 async ？
          <input id="chkUseAsync" type="checkbox" checked="checked" />
        </td>

        <td>
            <input id="btnRunLongTime" type="button" value="执行长时间处理" />
        </td>
      </tr>


    </table> 



<h4>
执行结果 1
</h4>

     <label id="lblCallAjaxResult1"></label>



<h4>
执行结果 2
</h4>

     <label id="lblCallAjaxResult2"></label>

  </form>





<p>

    <strong>注意事项：</strong>
这个 async 的默认值，是 true 的


在实际项目开发过程中， 

如果存在  后续处理，必须要依赖于 ajax 返回结果以后， 才能处理的， 可以考虑 手动设置这个参数！

（ 一般建议是 后续处理放在 success 代码块中 ）


</p>




</body>
</html>
